<link type="text/css" rel="stylesheet" href="_testing/style.css" />
<script type="text/javascript" src="_testing/jquery.js"></script>

<script type="text/javascript" src="_testing/jquery.coundown/jquery.countdown.js"></script>

<script type="text/javascript" src="_testing/script.js"></script>
<script>
    
    function hide_tasks(){
        $('.Task:first').addClass('CurrentTask');
        return false;
    }
    function boss_next(){
        next();
        $('#boss_say').html('Боссу надоело ждать');
    }
    function next(){
        var current = $('.CurrentTask');
        current.removeClass('CurrentTask');
        if(current.next().length == 0){
            $('#TestForm').submit();
        } else {
            
            $('#countdown').countdown('change', {until: 20}); 
            current.next().addClass('CurrentTask');//= $('.CurrentTask');
            
        }
        //$('.CurrentTask').next().css('background-color', 'red');
        return false;
    }
    $(function(){
        hide_tasks();
        //$('#countdown').countdown({until: 80, compact: true, format: 'MS', description: ''});
        
        
        $('#countdown').countdown({until: 5, compact: true, format: 'MS', onExpiry: boss_next}); 
        
    });
    //$('#countdown').countdown({until: 80, compact: true,         format: 'MS', description: ''});
</script>
<div class="TestStatus">
    <div class="Alarm">
        <span class="AlarmImg">
            <img src="http://www.bielefeldundbuss.de/bilder/wecker.jpg" width="32">
        </span>
        <span class="AlarmText" id="countdown">

        </span>
        <span  id="boss_say">

        </span>
    </div>

</div>
<?php

  function printAnswers ( $answers, $question_id, $correct_questions ) {
      ?>
      <ul>
          <?php
          foreach ( $answers as $answer_id => $answer ) {
              ?>
              <li><?php
        echo in_array( $answer_id, $correct_questions ) ? '<img src="img/icons/checked.png" />' : '<img src="img/icons/cross.png" />';
              ?>
                  <input type="checkbox" name="answer[<?php echo $question_id ?>][<?php echo $answer_id ?>]"> <?php echo $answer ?>
              </li>
          <?php } ?>
      </ul>
      <?php
  }

  function printTask ( Task $task ) {
      ?>
      <div class="Task">
          <div class="question">
              <?php
              if ( DEBUG )
                  echo 'ID = ' . $task->getId() . ')';
              echo $task->getQuestion()
              ?>
          </div>
          <div class="answers" id="<?php $task->getId() ?>">
              <?php printAnswers( $task->getAnswers(), $task->getId(), DEBUG ? $task->getCorrectAnswers() : null  ) ?>
          </div>
          <div class="action">
              <p><a href="#" onclick="return next();">Ответить</a> | <a href="#" onclick="return next();">Я не знаю, следующий вопрос</a></p>
          </div>

          <?php
          if ( DEBUG )
              echo '<hr>' . $task->getExterndedAnswer();
          ?>
      </div>
      <?php
  }

  function printTest ( Test $test ) {
      $tasks = $test->getTasks();
      ?>
      <form action="/?page_id=4&final" method="post" id="TestForm">
          <div class="Tasks">
              <?php
              foreach ( $tasks as $task ) {
                  printTask( $task );
              }
              ?>
          </div>
          <?php
          if ( DEBUG ) {
              ?>
              <input type="submit" value="Закончить тестирование">
              <?
          }
          ?>
      </form>
      <?php
  }

  printTest( $test );
?>